<template>
	<view class="collectionForm">
		<view class="Form">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="名称" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入文件名称(限制50字符)" />
				</uni-forms-item>
				<uni-forms-item label="简介" name="desc">
					<uni-easyinput v-model="valiFormData.desc" placeholder="可输入简介(限制100字符)" />
				</uni-forms-item>

			</uni-forms>
		</view>
		<button :disabled='finish' class="mini-btn" size="mini" @click="submit('valiForm')">完成</button>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const rules = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '文件名称不能为空'
			}, {
				maxLength: 50,
				errorMessage: '字数不能超过50'
			}]
		},
		age: {
			rules: [{
			}, {
				maxLength: 100,
				errorMessage: '字数不能超过100'
			}]
		}
	})
	const finish = ref(false)
	const valiForm = ref(null)
	const valiFormData = reactive({
		name: '',
		desc: '',
	}, )

	function submit(ref) {
		valiForm.value.validate().then(res => {
			res.user_id = "646c7cc5d46a9eeae5d562b5"
			console.log('success', res);
			uni.request({
				url: 'http://127.0.0.1:3366/twk/addcollectionfolder',
				data: res,
				method: 'POST',
				success: ({
					data
				}) => {
					// console.log('原生的结果', data);
					uni.showToast({
						title: `新建成功`
					})
					uni.navigateTo({
						url: '/pages/web/twk/detail'
					})
				},
				fail: (err) => {
					console.log('原生获取失败~');
				}
			})
			
		}).catch(err => {
			console.log('err', err);
		})
	}
</script>

<style lang="less">
	.collectionForm {
		text-align: center;

		.Form {
			padding: 20px 20px;
		}

	}

	.mini-btn {
		color: #a5a5a5;
		border: none;
	}
</style>